<template>
	<u-popup mode="top"  :show="portuniShow" @close="portuniClose">
		<u-notify ref="uNotify" />

		<view style="height:1080rpx;padding-top:70rpx;overflow-y: auto;padding-bottom:40px;" class="padding-sm">

			<uni-forms ref="valiForm" :rules="rulesFrom" :modelValue="mode" labelWidth="100px" label-position="left">
				<uni-forms-item label="内容" required name="projectTitle">
					<uni-easyinput autoHeight :maxlength="-1" v-model="mode.projectTitle" type="textarea" placeholder="请输入内容"></uni-easyinput>
				</uni-forms-item>
				
				<uni-forms-item label="归属" required name="belongingTo">
					<uni-easyinput v-model="mode.belongingTo" placeholder="请输入归属"></uni-easyinput>
				</uni-forms-item>
				<view @click="handStaging(2)">
					<uni-forms-item label="开始日期" required name="orderStartDate">
						<uni-easyinput disabled style="pointer-events: none;background-color: #fff !important"
							v-model="mode.orderStartDate" placeholder="请选择开始日期" />
					</uni-forms-item>
				</view>
				<view @click="handStaging(1)">
					<uni-forms-item label="结束日期" required name="orderEndDate">
						<uni-easyinput disabled style="pointer-events: none;background-color: #fff !important"
							v-model="mode.orderEndDate" placeholder="请选择结束日期" />
					</uni-forms-item>
				</view>
				<uni-forms-item label="上传图片">
					<u-upload :fileList="fileList"  :sizeType="['compressed']" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="5"></u-upload>
				</uni-forms-item>
			</uni-forms>
			<view style="position:absolute;bottom: 0rpx; left: 50%; transform: translateX(-50%); width: 100%;"
				class="flex justify-around bg-white padding-bottom">
				<view class="cu-btn round bg-gray" @click="portuniClose" style="width: 40%;">关闭</view>
				<view class="cu-btn round bg-green" style="width: 40%;" @click="portuniOpen">确定</view>
			</view>
		</view>
		<TipsModal :uModalShow="uModalShow" :uModalContent="uModalContent" @uModalCle="uModalCle"
			@uModalCom="uModalCom" />
			<uni-calendar ref="refStaging" :insert="false" @confirm="ConfirmStaging" />
	</u-popup>
</template>
<script>
	import TipsModal from '@/components/TipsModal/TipsModal.vue' //确定窗
	import myApi from '@/utils/app.js' //调用接口使用
	export default {
		name: 'problemMode',
		components: {
			TipsModal
		},
		data() {
			return {
				portuniShow: false,
				mode: {},
				fileList: [],
				dataIndex:0,
				NewaDta:{},
				rulesFrom: {
					orderStartDate:{
						rules: [{
							required: true,
							errorMessage: '请选择开始时间'
						}]
					},
					orderEndDate:{
						rules: [{
							required: true,
							errorMessage: '请选择结束时间'
						}]
					},
					projectTitle:{
						rules: [{
							required: true,
							errorMessage: '请输入标题'
						}]
					},
					belongingTo:{
						rules: [{
							required: true,
							errorMessage: '请输入归属'
						}]
					},

				},
				uModalShow: false, //确定窗
				uModalContent: '你确定要备注吗？', //确定窗
			}
		},
		methods: {
			onProblem(item) {
				this.NewaDta = item
				const now = new Date();
				      const year = now.getFullYear();
				      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				      const day = String(now.getDate()).padStart(2, '0');
				      const dataTime = `${year}-${month}-${day}`;
					  this.mode={
					  	speedOfProgress:10,
						orderStartDate:dataTime,
						orderEndDate:dataTime,
					  }
				this.fileList=[]
				this.portuniShow = true
			},
			portuniOpen() { // 确定触发
				if (this.fileList.length == 0) return this.onNotify({
					type: 'error',
				})
				this.$refs.valiForm.validate().then(res => {
					this.OrderEdit()
				}).catch(err => {
					this.onNotify({
						type: 'error',
						message: err[0].errorMessage,
					})
				})
			},
			async OrderEdit() {
				let urlString =undefined
				if(this.fileList && this.fileList.length>0){
					const urls = this.fileList.map(item => item.url);
					// 使用 join 方法将数组转换为用逗号分隔的字符串
					urlString = urls.join(',');
				}
				try {
					const res = await this.$request({
						url: myApi.supplementProblem,
						method: 'POST',
						data: {
							orderNo: this.NewaDta.order.id,
							vto: {
								username:this.NewaDta.order.createBy,
								...this.mode,
								state:0,
								picPath:this.fileList && this.fileList.length>0? urlString:null,
							}
						}
					});
					if (res.code == 200) {
						this.$emit('ok', 1)
						this.portuniClose()
					}
				} catch (e) {
					// 失败执行
					console.log(e)
				} finally {
					// 销毁执行
					this.loading = false
				}
			},
			// 确定框 确定
			async uModalCom() {
				this.$emit('OnOrderReply', this.mode)
				this.uModalCle()
			},
			// 取消删除
			uModalCle() {
				this.uModalShow = false
			},
			onNotify(round) {
				this.$refs.uNotify.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '请上传图片',
					top: 50
				})
			},
			portuniClose() {
				this.portuniShow = false
				this.mode = {}
				this.NewaDta={}
				this.fileList = []
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				console.log(this.fileList)
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: myApi.picUpload, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							ip: myApi.host
						},
						header: {

						},
						success: (res) => {
							console.log(res)
							setTimeout(() => {
								const data = JSON.parse(res.data)
								console.log(data)
								resolve(data.result[0])
							}, 1000)
						}
					});
				})
			},
			handStaging(index) {
				this.dataIndex =index
				this.$refs.refStaging.open();
			},
			ConfirmStaging(e) {
				if (this.dataIndex == 2) this.$set(this.mode, 'orderStartDate', e
					.fulldate);
				if (this.dataIndex == 1) this.$set(this.mode, 'orderEndDate', e
					.fulldate);
			},
		}
	}
</script>